<template>
    <div>
        <p align="left" style="color: black; font-size: 20px">查询联系人</p>
        <fieldset>
            <el-form :inline="true" class="demo-form-inline">
             <el-form-item label="客户名称">
    <el-input v-model="pageInfo.searchItem.lxname"></el-input>
  </el-form-item>
  <el-form-item label="创建时间">
    <el-input v-model="pageInfo.searchItem.startfirsttime" type="date"></el-input>
    
  </el-form-item>
  <el-form-item>
   
    <el-input v-model="pageInfo.searchItem.endfirsttime" type="date"></el-input>
  </el-form-item>
   <el-form-item>
          <el-button type="primary" @click="GetList">查询</el-button>
        </el-form-item>
        </el-form>
        </fieldset>
         <p align="left" style="color: black; font-size: 20px">联系人信息</p>
    <el-popover placement="right" width="400" trigger="click">
      <el-select v-model="colOptions" multiple 
           collapse-tags style="margin-left: 20px;" placeholder="请选择">
  <el-option v-for="item in colSelect" :key="item" :label="item" :value="item">
  </el-option>
</el-select>
      <el-button slot="reference">设置显示列</el-button>
    </el-popover>
    <fieldset>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 98%"
        ref="tableDataRef"
      >
        <el-table-column
          v-if="colData[0].istrue"
          prop="customer_number"
          label="序号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          v-if="colData[1].istrue"
          prop="first_party_name"
          label="姓名"
          width="180"
        >
        </el-table-column>
        <el-table-column
          v-if="colData[2].istrue"
          prop="first_party_duty"
          label="职务"
          width="180"
        >
        </el-table-column>
        <el-table-column
          v-if="colData[3].istrue"
          prop="first_party_department"
          label="部门"
          width="180"
        >
        </el-table-column>
        <el-table-column
          v-if="colData[4].istrue"
          prop="first_party_tell"
          label="电话"
          width="180"
        >
        </el-table-column>
        <el-table-column
          v-if="colData[5].istrue"
          prop="first_party_email"
          label="Email"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="客户"
          width="180"
        >
        <template slot-scope="scope">
            <el-button @click="FanCMS(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          v-if="colData[6].istrue"
          prop="customer_for_short"
          label="客户编号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          v-if="colData[7].istrue"
          prop="customer_client_name"
          label="客户名称"
        >
        </el-table-column>
        <el-table-column
          v-if="colData[8].istrue"
          prop="customer_linkman"
          label="联系人"
        >
        </el-table-column>
        <el-table-column
          prop="customer_company_tel"
          label="联系电话"
          v-if="colData[9].istrue"
        >
        </el-table-column>
        <el-table-column
          prop="customer_company_address"
          label="公司地址"
          v-if="colData[10].istrue"
        >
        </el-table-column>
        <el-table-column
          v-if="colData[11].istrue"
          prop="customer_fax_number"
          label="传真号"
        >
        </el-table-column>
        <el-table-column prop="customer_for_short" label="客户简称"  v-if="colData[12].istrue"> </el-table-column>
        <el-table-column prop="extend_client_english_name" label="客户英文名"  v-if="colData[13].istrue"> </el-table-column>
        <el-table-column prop="whether_cooperation_id" label="是否合作"  v-if="colData[14].istrue"> </el-table-column>
        <el-table-column prop="statename" label="所在国家"  v-if="colData[15].istrue"> </el-table-column>
        <el-table-column prop="provincename" label="所在省份"  v-if="colData[16].istrue"> </el-table-column>
        <el-table-column prop="cityname" label="所在城市"  v-if="colData[17].istrue"> </el-table-column>
        <el-table-column prop="client_id" label="客户类型"  v-if="colData[18].istrue"> </el-table-column>
        <el-table-column prop="industry_id" label="所属行业"  v-if="colData[19].istrue"> </el-table-column>
        <el-table-column prop="extend_email" label="邮箱"  v-if="colData[20].istrue"> </el-table-column>
        <el-table-column prop="extend_homepage_of_a_company" label="公司主页"  v-if="colData[21].istrue"> </el-table-column>
        <el-table-column prop="extend_relation_time" label="关系简历时间"  v-if="colData[22].istrue"> </el-table-column>
        <el-table-column prop="extend_relation_department" label="关系部门"  v-if="colData[23].istrue"> </el-table-column>
        <el-table-column prop="extend_credit_ratings_id" label="信用级别"  v-if="colData[24].istrue"> </el-table-column>
        <el-table-column prop="extend_intimacy_id" label="亲密度"  v-if="colData[25].istrue"> </el-table-column>
        <el-table-column prop="extend_bank_name" label="开户银行名称"  v-if="colData[26].istrue"> </el-table-column>
        <el-table-column prop="enterprise_code" label="企业代码"  v-if="colData[27].istrue"> </el-table-column>
        <el-table-column prop="extend_bank_account" label="开户银行账号"  v-if="colData[28].istrue"> </el-table-column>
        <el-table-column prop="extend_legal_published" label="法定代表"  v-if="colData[29].istrue"> </el-table-column>
        <el-table-column prop="extend_taxpayer_registration_number" label="纳税人识别号"  v-if="colData[30].istrue"> </el-table-column>
        <el-table-column prop="extend_remark" label="备注"  v-if="colData[31].istrue"> </el-table-column>
        <el-table-column prop="lName" label="入录人"  v-if="colData[32].istrue"> </el-table-column>
        <el-table-column prop="lTime" label="入录时间"  v-if="colData[33].istrue"> </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button @click="ChaFirst(scope.row.first_party_id)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>


      <el-dialog
  title="联系人信息"
  :visible.sync="dialogVisible"
  width="30%">
  <span slot="footer" class="dialog-footer">
   <el-form label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="序号">
                <el-input v-model="FanFirstInfo.first_party_number" disabled></el-input>
                
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="姓名">
                <el-input v-model="FanFirstInfo.first_party_name" disabled></el-input>
                
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="职务">
                <el-input v-model="FanFirstInfo.first_party_duty" disabled></el-input>
                
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="电话">
                <el-input v-model="FanFirstInfo.first_party_tell" disabled></el-input>
                
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="部门">
                <el-input v-model="FanFirstInfo.first_party_department" disabled></el-input>
                
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="商务电话">
                <el-input v-model="FanFirstInfo.first_party_business_calls" disabled></el-input>
                
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="住宅电话">
                 <el-input v-model="FanFirstInfo.first_party_homephone" disabled></el-input>
                
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="商务传真">
                  <el-input v-model="FanFirstInfo.first_party_business_fax" disabled></el-input>
                
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="住宅传真">
                <el-input v-model="FanFirstInfo.first_party_homefax" disabled></el-input>
                
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="Emial">
                <el-input v-model="FanFirstInfo.first_party_email" disabled></el-input>
                
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注">
                 <el-input v-model="FanFirstInfo.first_party_remark" disabled></el-input>
               
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
  </span>
</el-dialog>
     
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageIndex"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </fieldset>
    </div>
</template>

<script>
var lujing = "http://localhost:55117/api/Customer/";
export default {
  data() {
    return {
      tableData: [],
      totalCount: 0,
      FanFirstInfo:{},
      FanCMSInfo: [],
      state:[],
      province:[],
      City:[],
      dialogVisible: false,
      checkAll: false,
      pageInfo: {
        pageIndex: 1,
        pageSize: 3,
        searchItem: {
          lxname: null,
          startfirsttime:null,
          endfirsttime:null,
        },
      },
      number: true,
      colData: [
        { title: "序号", istrue: true },
        { title: "姓名", istrue: true },
        { title: "职务", istrue: true },
        { title: "部门", istrue: true },
        { title: "电话", istrue: true },
        { title: "Email", istrue: true },
        { title: "客户编号", istrue: false },
        { title: "客户名称", istrue: false },
        { title: "联系人", istrue: false },
        { title: "联系电话", istrue: false },
        { title: "公司地址", istrue: false },
        { title: "传真号", istrue: false },
        { title: "客户简称", istrue: false },
        { title: "客户英文名", istrue: false },
        { title: "是否合作", istrue: false },
        { title: "所在国家", istrue: false },
        { title: "所在省份", istrue: false },
        { title: "所在城市", istrue: false },
        { title: "客户类型", istrue: false },
        { title: "所属行业", istrue: false },
        { title: "邮箱", istrue: false },
        { title: "公司主页", istrue: false },
        { title: "关系简历时间", istrue: false },
        { title: "关系部门", istrue: false },
        { title: "信用级别", istrue: false },
        { title: "亲密度", istrue: false },
        { title: "开户银行名称", istrue: false },
        { title: "企业代码", istrue: false },
        { title: "开户银行账号", istrue: false },
        { title: "法定代表", istrue: false },
        { title: "纳税人识别号", istrue: false },
        { title: "备注", istrue: false },
        { title: "入录人", istrue: false },
        { title: "入录时间", istrue: false },
      ],
      colOptions: [
        "序号",
        "姓名",
        "职务",
        "部门",
        "电话",
        "Emial",
      ], //默认全选
      colSelect: [
        "序号",
        "姓名",
        "职务",
        "部门",
        "电话",
        "Emial",
        "客户编号",
        "客户名称",
        "联系人",
        "联系电话",
        "公司地址",
        "传真号",
        "客户简称",
        "客户英文名",
         "是否合作",
         "所在国家",
        "所在省份",
         "所在城市",
        "客户类型",
         "所属行业",
         "邮箱",
         "公司主页",
         "关系简历时间",
         "关系部门",
         "信用级别",
         "亲密度",
         "开户银行名称",
         "企业代码",
         "开户银行账号",
         "法定代表",
         "纳税人识别号",
        "备注",
         "入录人",
         "入录时间",
      ],
    };
  },
  created() {
    this.GetList();
    this.getState();
  },
  watch: {
    colOptions(valArr) {
      console.log(this.$refs.tableDataRef);
      var arr = this.colSelect.filter((i) => valArr.indexOf(i) < 0); // 未选中
      this.colData.filter((i) => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    },
    
   
  },
  methods: {
     getState() {
      this.$myaxios.get(lujing + "GetChina?id=0").then((obj) => {
        this.state = obj.data;
      });
    },
    
    GetList() {
      
      this.$myaxios.post(lujing + "GetAllInfo", this.pageInfo).then((obj) => {
        console.log(this.pageInfo);
        this.tableData = obj.data.data;
        this.totalCount = obj.data.total;
        
      });
    },
    handleSizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.GetList();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageIndex = val;
      this.GetList();
    },
    ChaFirst(id){
        this.dialogVisible=true;
        this.$myaxios.get(lujing + "FanFirst?id=" + id).then((obj) => {
        this.FanFirstInfo = obj.data;
        
      });
    },
    FanCMS(id) {
      sessionStorage.setItem("fid", id.customer_id);
      sessionStorage.setItem("jid", id.first_party_id);
      sessionStorage.setItem("mid", id.satisfaction_survey_id);
      this.$router.push("/sys/CUpdate");
    },
    BainCMS(id)
    {
      sessionStorage.setItem("fid", id.customer_id);
      sessionStorage.setItem("jid", id.first_party_id);
      sessionStorage.setItem("mid", id.satisfaction_survey_id);
      this.$router.push("/sys/CBian");
    }
  },
};
</script>